<template >
  <keep-alive :include="['rolesMain']" >
    <component :is="currentView" ></component >
  </keep-alive >
</template >

<script >
  import RolesMain from './main'
  import Groups from './groups'
  import Auth from './auth'
  import Members from './members'

  export default {
    name: 'roles',
    components: {
      RolesMain,
      Groups,
      Auth,
      Members
    },
    data() {
      return {
        index: 0,
        views: [RolesMain, Groups, Auth, Members]
      }
    },
    computed: {
      currentView() {
        return this.views[this.index]
      },
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      }
    },
    methods: {
      changeView(index) {
        this.index = index
      },
      back() {
        this.changeView(0)
      }
    }
  }
</script >


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss" >

</style >
